<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dAVCgTnW50hRWsp1bXRfPLPIMLF1nR3b"></script>
		<title>百度地图Dome</title>
		<!-- 样式 -->
		<style>
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#container {
				height: 100%
			}
			.controlCss{
				width:800px;
				height:30px;
				line-height: 30px;
				font-size:20px;
				background:yellow;
			}
		</style>
		<!-- js -->
		<script type=" text/javascript">
			//变量
			var map; //地图
			var clickCentPoint = new BMap.Point(117.097377, 36.872594); //拾取中心坐标点
			var polygonData; //记录多边形已获取区域
			var labelUp;
			//初始化方法页面初始化时加载
			window.onload = function() {
				///初始化地图
				initMap();
				//添加折线
				//Addpolyline();
				//添加多边形
				Addpolygon();
				//Addpolygon();
				//添加第三方控件
				AddControl();
				//添加右键菜单
				AddMenu();
				//拾取坐标点
				//AddClick();
			}
			//初始化地图
			function initMap() {
				map = new BMap.Map("container");
				//map.centerAndZoom('济南', 11); //设置中心点
				map.centerAndZoom(new BMap.Point(116.98, 36.67), 11); //设置中心点
				map.enableScrollWheelZoom(true); //启用鼠标缩放

			}
			//地图添加折线
			function Addpolyline() {
				var polyline = new BMap.Polyline([
					new BMap.Point(117.153492, 36.715601),
					new BMap.Point(117.185687, 36.63189)
				], {
					strokeColor: "blue",
					strokeWeight: 6,
					strokeOpacity: 0.5
				});
				map.addOverlay(polyline);
				//开启折线编辑
				polyline.enableEditing();

			}
			//增加多边形
			function Addpolygon() {
				var polygon = new BMap.Polygon([
					new BMap.Point(117.087377, 36.732494),
					new BMap.Point(117.185687, 36.912185),
					new BMap.Point(117.087377, 36.932594),
				], {
					strokeColor: "blue",
					fillColor: "red",
					strokeWeight: 2,
					strokeOpacity: 0.9, //边线透明度
					fillOpacity: 0.3 //填充的透明度
				}); 
				//创建多边形
				map.addOverlay(polygon); //增加多边形
				//开启多边形编辑
				polygon.enableEditing();
				AddpointLabel();
				//记录多边形
				polygonData = polygon;
			}
			//多边形的中心点说明
			function AddpointLabel() {
				//添加中心点的说明
				var point = new BMap.Point(117.097377, 36.872594);
				var opts = {
					position: clickCentPoint, // 指定文本标注所在的地理位置
					offset: new BMap.Size(0, 0) //设置文本偏移量
				}
				var label = new BMap.Label("区域中心点", opts); // 创建文本标注对象
				label.setStyle({
					color: "red",
					fontSize: "12px",
					height: "20px",
					lineHeight: "20px",
					fontFamily: "微软雅黑",
					border: "0px",
					backgroundColor: ""
				});
				map.removeOverlay(labelUp);
				map.addOverlay(label);
				labelUp = label;
			}
			//添加第三方控件
			function AddControl() {
				var cr = new BMap.CopyrightControl({
					anchor: BMAP_ANCHOR_TOP_LEFT
				}); //设置版权控件位置
				map.addControl(cr); //添加版权控件

				var bs = map.getBounds(); //返回地图可视区域
				var htmlControl = "<div class='controlCss'>自定义内容" +
					"<a href='#' onclick='GetAreaData()'>显示区域数据</a>  " +
					"<a href='#' onclick='AddClick()'>选择中心点</a>  " +
					"<a href='#' onclick='removeClick()'>保存中心点</a>  " +
					"</div>";


				cr.addCopyright({
					id: 2,
					content: htmlControl,
					bounds: bs
				});
				//Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数
			}

			//添加右键菜单
			function AddMenu() {
				var menu = new BMap.ContextMenu();
				var txtMenuItem = [{
						text: '放大',
						callback: function() {
							map.zoomIn()
						}
					},
					{
						text: '缩小',
						callback: function() {
							map.zoomOut()
						}
					}
				];
				for (var i = 0; i < txtMenuItem.length; i++) {
					menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
				}
				map.addContextMenu(menu);
			}
			// 拾取坐标的通用方法
			function AddOrRemove(e) {
				alert(e.point.lng + "," + e.point.lat);
				clickCentPoint = new BMap.Point(e.point.lng, e.point.lat);
				AddpointLabel();
			}
			//点击拾取坐标点
			function AddClick() {
				//单击获取点击的经纬度
				map.addEventListener("click", AddOrRemove);

			}

			//取消点击获取坐标
			function removeClick() {
				map.removeEventListener("click", AddOrRemove);
			}
			//获取区域的数据
			function GetAreaData() {
				//返回区域的数组
				var data = polygonData.getPath();
				console.log(data);
				//返回覆盖物的地理区域范围
				var d = polygonData.getBounds();
				console.log(d);
			}
		</script>
	</head>
	<body>
		<div id="container"></div>

	</body>
</html>
